我們可以利用 {children} 傳入 React compment 的方式製作話載入場景時的過場頁面

 <Intro>
      <App />
 </Intro>
    
    
export default function Intro({ children }) {
  return (
    <div>
    { children }
    </div>}
  );

實作 Intro

import { Suspense, cloneElement, useEffect, useState } from 'react'
import Logo from './Logo'

function Ready({ setReady }) {
  useEffect(() => () => void setReady(true), [])
  return null
}

export default function Intro({ children }) {
  const [clicked, setClicked] = useState(false)
  const [ready, setReady] = useState(false)
  return (
    <>
      <Suspense fallback={<Ready setReady={setReady} />}>{cloneElement(children, { ready: clicked && ready })}</Suspense>
      <div className={`fullscreen bg ${ready ? 'ready' : 'notready'} ${clicked && 'clicked'}`}>
        <div className="stack">
          {/* <a href="#" onClick={() => setClicked(true)}>
            {!ready ? 'loading' : 'click to continue'}
          </a> */}
          <img onClick={() => setClicked(true)} src="/藥堂.svg" width="100%" alt="SVG as an image" />
          {/* <Logo /> */}
        </div>
      </div>
    </>
  )
}

在最外層導入

import { createRoot } from 'react-dom/client'
import './styles.css'
import App from './App'
import Intro from './Intro'

createRoot(document.getElementById('root')).render(
  <>
    <Intro>
      <App />
    </Intro>
  </>
)